<template>
  <!-- 首页底部栏 -->
  <view>
    <view class="phone"> 幸福热线：{{ phoneNum }} </view>
    <view class="page">
      <navigator
        class=""
        target=""
        :url="item.url"
        hover-class="navigator-hover"
        open-type="navigate"
        v-for="item in bottomList"
        :key="item.id"
      >
        <view class=""> {{ item.title }}</view>
      </navigator>
    </view>
    <view class="item"> 恋爱行动派，脱单趁现在！ </view>
    <view class="item"> {{}} </view>
    <view class="item"> {{}} </view>
  </view>
</template>

<script setup lang="ts">
import type { bottomItem } from '@/types/index/home'
import { ref } from 'vue'
const phoneNum = ref<string>('18618516819')
const bottomList = ref<bottomItem[]>([
  { id: '1', title: '首页', url: '' },
  { id: '2', title: '关于我们', url: '' },
  { id: '3', title: '联系方式', url: '' },
  { id: '4', title: '平台公告', url: '/pages/announcement/announcement' },
])
</script>

<style scoped lang="scss">
.phone {
  text-align: center;
  color: #ea777f;
  padding: 20rpx 0rpx;
}

.page {
  width: 700rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0rpx;
  font-weight: 600;
  font-size: 40rpx;
}

.item {
  text-align: center;
  padding: 20rpx 0rpx;
}
</style>
